<template>
    <nav>
      <div class="nav_a">
          <div class="nav_left" :class="myindex==1?myleft:''" @touchmove="movefun($event)"
              @touchstart="startfun($event)">
              <a href="#" v-for="(v,index) in navimage1" :key="index">
                  <img :src="v.img" alt="">
                  <p>{{v.name}}</p>
              </a>
          </div>
          <div class="nav_r" :class="myindex==0?'':myright" @touchmove="movefun($event)"
              @touchstart="startfun($event)">
              <a href="#" v-for="(v,index) in navimage2" :key="index">
                  <img :src="v.img" alt="">
                  <p>{{v.name}}</p>
              </a>

          </div>
          <ul>
              <li v-for="(v,index) in 2" @click="clickfun(index)" :key="index" :class="index==myindex?mylibgc:''"></li>
          </ul>
      </div>
  </nav>
</template>

<script>

export default {
  data() {
      return {
          navimage1: [{
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png",
              name: '京东超市',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png",
              name: '数码电器',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png",
              name: '京东新百货',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
              name: '京东生鲜',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png",
              name: '京东到家',
          },
          {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
              name: '充值缴费',
          },
          {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png",
              name: '附近好店',
          },
          {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png",
              name: '领劵',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png",
              name: 'PLUS会员',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
              name: '京东国际',
          }],
          navimage2: [{
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png",
              name: '京东拍卖',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png",
              name: '玩3C',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png",
              name: '沃尔玛',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png",
              name: '京东生鲜',
          }, {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png",
              name: '京东旅行',
          },
          {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png",
              name: '拍拍二手',
          },
          {
              img: "//m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png",
              name: '全部',
          }],
          myindex: 0,
          myleft: "nav_left1",
          myright: "nav_r1",
          mylibgc: "libgc",
          spageX: 0
      }
  },
  methods: {
      clickfun(index) {
          this.myindex = index
      },
      startfun(evt) {
          this.spageX = evt.targetTouches[0].pageX
      },
      movefun(evt) {
          if (evt.targetTouches[0].clientX + 20 > this.spageX) {
              this.myindex = 0
          }
          if (evt.targetTouches[0].clientX + 20 < this.spageX) {
              this.myindex = 1
          }
      }
  }
}
</script>
<style lang="scss" scoped>

$mylength:100vw;
$mylength2:43.2vw;
nav {
  width: $mylength;
  height: $mylength2;
  display: flex;
  overflow: auto;
  .nav_a {
  width: $mylength;
  height:$mylength2;
  display: flex;
  position: relative;
  overflow: hidden;
}

}

nav::-webkit-scrollbar {
  display: none;
}

nav .nav_left,
nav .nav_r {
  width: $mylength;
  height: 40vw;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
}

nav .nav_left {
  left: 0;
  transition: 0.4s;
}

nav .nav_left1 {
  left: -$mylength;
}

nav .nav_r {
  left: $mylength;
  transition: 0.4s;
}

nav .nav_r1 {
  left: 0;
}

nav a {
  width: 20vw;
  height: 19.7333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6e6e6e;
  font-size: 3.2vw;
}

nav a img {
  width: 10.6667vw;
  height: 10.6667vw;
  margin: 2.4vw 0 2vw 0;
}

nav .nav_a ul {
  position: absolute;
  bottom: 1.0333vw;
  left: 50%;
  transform: translateX(-3.2vw);
  width: 5vw;
  height: 1.5vw;
  display: flex;
  justify-content: space-between;
  z-index: 888;
}

nav .nav_a ul li {
  width:35%;
  background: rgb(218, 218, 218);
  border-radius: 50%;
}

nav .nav_a ul li.libgc {
  background-color: red;
}
</style>